<template>
  <page-view class="flex flex-col">
    <title-bar :show-back="true">登录</title-bar>
    <div class="content-box flex-1 overflow-auto">
      <van-form ref="loginFormEl">
        <van-cell-group inset>
          <van-field
            v-model="formData.custom_tel"
            name="手机号"
            label="手机号"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写手机号' },{
              pattern:/^1[35789]\d{9}$/,message:'请填写正确的手机号',trigger:'onBlur'
            }]" />
          <van-field
            v-model="formData.custom_pwd"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
          <button
            class="bg-primaryColor text-white border-none w-full h-[35px] rounded-full"
            type="submit" @click="submitForm">
            登录
          </button>
        </div>
      </van-form>
    </div>
  </page-view>
</template>
<script setup>
import titleBar from "../components/title-bar.vue";
import { reactive, ref } from "vue";
import { Toast } from "vant";
const loginFormEl = ref();
const formData = reactive({
  custom_tel: "",
  custom_pwd: "",
});

const submitForm = () => {
  loginFormEl.value
    .validate()
    .then(() => {
      checkLogin();
    })
    .catch((error) => {
      Toast("请填写完整信息");
    });
};

//检测登录
const checkLogin = () => {};
</script>
<style scoped>
</style>